<script setup>
import {reactive} from 'vue';

const table = reactive({
  tableData: [],
  columns: [
    {
      title: '编号',
      dataIndex: 'id',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
    },
    {
      title: '操作',
      key: 'operation',
      slots: {
        customRender: 'operation'
      }
    }
  ]
})

const onInit = () => {
  fetch(`${process.env.VUE_APP_API}/items`)
      .then(res => res.json())
      .then(data => {
        table.tableData = data
      })
}
onInit()

const onDeleteItem = (id) => {
  fetch(`${process.env.VUE_APP_API}/items/${id}`, {
    method: 'DELETE'
  }).then(() => {
    onInit()
  })
}
</script>

<template>
<a-table :dataSource="table.tableData"
         :columns="table.columns"
         :pagination="false"
         rowKey="id">
  <template #operation="{ record }">
    <a-popconfirm title="是否要进行删除操作?" okText="确定" cancelText="取消" @confirm="onDeleteItem(record.id)">
      <a-button type="primary" danger>删除</a-button>
    </a-popconfirm>
  </template>
</a-table>
<a-pagination :total="table.tableData.length"/>
</template>